<template>
	<view class="">
		<view class="container" :style="{backgroundColor: darkStyle.pageBgColor}">
			<view class="making" :style="{top: (screenH-200)*0.5 + 'rpx'}" v-if="showMaking">
				<view class="making-icon">
					<image src="../../static/makecard/loading.gif"></image>
				</view>
				<text class="making-text">制作中，请稍候</text>
			</view>
			<!-- <view class="tipmoveqrcode" :style="{top: (screenH-500)*0.5 + 'rpx'}"
				v-if="tipmoveqrcode_task1 || tipmoveqrcode_task2">
				<view @click.stop="closeTipMoveQrcode" class="tipmove_close">
					<image src="../../static/makecard/tipmove_close.png"></image>
				</view>
				<view>
					<image class="tipmove_fail" src="../../static/makecard/tipmove_fail.png"></image>
				</view>
				<block v-if="tipmoveqrcode_task1">
					<view class="tipmove_text">邀请{{invite_count}}个好友</view>
					<view class="tipmove_text tipmove_text2">即可获得去二维码权益</view>
					<view @click.stop="goInvite" class="tipmove_btn">去邀请</view>
				</block>
				<block v-else>
					<view class="tipmove_text">添加创始人微信</view>
					<view class="tipmove_text">即可获得去二维码权益</view>
					<view @click.stop="goAddwx" class="tipmove_btn">去添加</view>
				</block>
			</view> -->
			<view @touchstart.stop="touchStart" class="slider" :style="{top:(screenH-458)*0.5+'rpx'}">
				<movable-area class="slider-bg">
					<movable-view @change="sliderChange" class="slider-btn" direction="all" :scale="false" x="0rpx"
						y="0rpx">
						<image src="../../static/makecard/slider_v.png"></image>
					</movable-view>
				</movable-area>
			</view>
			<view class="moka-container" :style="{height: screenH + 'rpx', width: card.width + 'rpx'}">
				<scroll-view :class="isDark ? 'main-scrollview-black' : 'main-scrollview-white'" :scrollTop="scrollTop"
					:scrollY="allowScroll" style="height:100%; width: 100%;">
					<movable-area class="photos-container"
						:style="{height: card.height + 'rpx', width: card.width + 'rpx', backgroundColor: isDark ? darkStyle.bgColor : lightStyle.bgColor}">
						<movable-view class="userinfo" :disabled="true" :outOfBounds="true" :scale="false"
							:style="{height: card.userInfo.height + 'rpx', width: card.userInfo.width + 'rpx'}"
							:x="card.userInfo.x + 'rpx'" :y="card.userInfo.y + 'rpx'">
							<view class="userinfo-container"
								:style="{ height:card.userInfo.width + 'rpx', width: card.userInfo.height + 'rpx', 
		                    transform: 'rotate(90deg) translate(' + (-card.userInfo.offset) + 'rpx, ' + (-card.userInfo.offset) + 'rpx)'}"
								v-if="card.type=='charu'||card.type=='cebian'">
								<view class="userinfo-info">
									<view class="cebian_move_bwh" v-if="!userInfo.is_bwh"></view>
									<view class="cebian_move_birthday" v-if="!userInfo.is_birthday"></view>
									<text class="name"
										:style="{'color': isDark ? darkStyle.nameColor : lightStyle.nameColor}">{{userInfo.nickname}}</text>
									<view class="item-cebian">
										<text class="property"
											:style="{color: isDark ? darkStyle.propertyColor : lightStyle.propertyColor }">身高HEIGHT</text>
										<text class="value"
											:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.height}}cm</text>
									</view>
									<view class="item-cebian">
										<text class="property"
											:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">体重WEIGHT</text>
										<text class="value"
											:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.weight}}kg</text>
									</view>
									<view class="item-cebian" v-if="userInfo.is_bwh">
										<text class="property"
											:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">胸围BUST</text>
										<text class="value"
											:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.bwh_b}}</text>
									</view>
									<view class="item-cebian" v-if="userInfo.is_bwh">
										<text class="property"
											:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">腰围WAIST</text>
										<text class="value"
											:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.bwh_w}}</text>
									</view>
									<view class="item-cebian" v-if="userInfo.is_bwh">
										<text class="property"
											:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">臀围HIPS</text>
										<text class="value"
											:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.bwh_h}}</text>
									</view>
									<view class="item-cebian">
										<text class="property"
											:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">鞋码SHOES</text>
										<text class="value"
											:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.shoe}}</text>
									</view>
									<view class="item-cebian">
										<text class="property"
											:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">衣码CLOTH</text>
										<text class="value"
											:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.cloth}}</text>
									</view>
									<view class="item-cebian" v-if="userInfo.is_birthday">
										<text class="property"
											:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">生日BIRTH</text>
										<text class="value"
											:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.birthday}}</text>
									</view>
									<image mode="aspectFit" :src="isDark?logoAvartar:blackLogoAvartar"></image>
								</view>
							</view>
							<view class="userinfo-container"
								:style="{height: card.userInfo.width + 'rpx', width: card.userInfo.height + 'rpx', 
												transform: 'rotate(90deg) translate(' + (-card.userInfo.offset) + 'rpx, ' + (-card.userInfo.offset) + 'rpx)'}" v-if="card.type=='dibu'">
								<view class="userinfo-info-dibu">
									<view class="userinfo-info-dibu-left">
										<text class="name-dibu"
											:style="{color:isDark ? darkStyle.nameColor : lightStyle.nameColor}">{{userInfo.nickname}}</text>
										<view class="item-dibu">
											<text class="property-dibu"
												:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">身高HEIGHT</text>
											<text class="value-dibu"
												:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.height}}cm</text>
										</view>
										<view class="item-dibu">
											<text class="property-dibu"
												:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">体重WEIGHT</text>
											<text class="value-dibu"
												:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.weight}}kg</text>
										</view>
										<view class="item-dibu" v-if="userInfo.is_bwh">
											<text class="property-dibu"
												:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">胸围BUST</text>
											<text class="value-dibu"
												:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.bwh_b}}</text>
										</view>
										<view class="item-dibu" v-if="userInfo.is_bwh">
											<text class="property-dibu"
												:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">腰围WAIST</text>
											<text class="value-dibu"
												:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.bwh_w}}</text>
										</view>
										<view class="item-dibu" v-if="userInfo.is_bwh">
											<text class="property-dibu"
												:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">臀围HIPS</text>
											<text class="value-dibu"
												:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.bwh_h}}</text>
										</view>
										<view class="item-dibu">
											<text class="property-dibu"
												:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">鞋码SHOES</text>
											<text class="value-dibu"
												:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.shoe}}</text>
										</view>
										<view class="item-dibu" v-if="userInfo.is_birthday">
											<text class="property-dibu"
												:style="{color: isDark ? darkStyle.propertyColor: lightStyle.propertyColor }">生日BIRTH</text>
											<text class="value-dibu"
												:style="{color : isDark ? darkStyle.valueColor : lightStyle.valueColor}">{{userInfo.birthday}}</text>
										</view>
									</view>
									<image mode="aspectFit" :src="isDark?logoAvartar:blackLogoAvartar"></image>
								</view>
							</view>
						</movable-view>
						<movable-view class="layout" :disabled="true" :id="item.id" :outOfBounds="true" :scale="false"
							:style="{ height:item.height + 'rpx', width: item.width + 'rpx'}" :x="item.x + 'rpx'"
							:y="item.y + 'rpx'" v-for="(item, index) in card.layouts" :key="index">
							<scroll-view @scroll="scroll" @click="tapPhoto" @touchend="touchEnd" @touchmove="touchMove"
								@touchstart="touchStart" class="photo-container" :id="item.id"
								:scrollX="photoInfos[index].scrollX || scrollInfo[index].scale!=1"
								:scrollY="photoInfos[index].scrollY || scrollInfo[index].scale!=1"
								:style="{height:item.width + 'rpx', width: item.height + 'rpx', 
		                    transform:'rotate(90deg) translate(' + (-item.offset) + 'rpx, ' + (-item.offset) + 'rpx)', border: '1rpx solid' + isDark ? darkStyle.bgColor : lightStyle.bgColor}"
								v-if="index < photoInfos.length">
								<image class="rotate" :src="photos[index]"
									:style="{height:photoInfos[index].rotateH*(scrollInfo[index].scale||1) + 'rpx', width: photoInfos[index].rotateW*(scrollInfo[index].scale||1) + 'rpx', verticalAlign: 'middle'}">
								</image>
							</scroll-view>
							<view @click="changePhoto" class="change" :hidden="!(showChangeButton&&index==changeIndex)"
								:id="item.id" :style="{top:(item.height-100)*0.5 + 'rpx', right:(item.width-100)*0.5 + 'rpx'}">替换
							</view>
						</movable-view>
					</movable-area>
				</scroll-view>
			</view>
			<scroll-view :style="{height:screenH + 'rpx', width: 750-card.width + 'rpx'}">
				<view class="header" :style="{height:750-card.width + 'rpx', width: screenH + 'rpx', 
		        transform:'rotate(90deg) translate('+ (screenH-750+card.width)/2 + 'rpx, ' + (screenH-750+card.width)/2 + 'rpx)'}">
					<view class="title">
						<view class="move">拖拽挪动</view>
					</view>
					<view class="operation">
						<!-- <view @click="switchBirthday" class="switch switch_birth">
							<image class="icon_check" src="../../static/makecard/birthday1.png"
								v-if="userInfo.is_birthday"></image>
							<image class="icon_check" src="../../static/makecard/birthday0.png" v-else></image>
						</view>
						<view @click="switchBWH" class="switch switch_bwh">
							<image class="icon_check" src="../../static/makecard/bwh1.png" v-if="userInfo.is_bwh">
							</image>
							<image class="icon_check" src="../../static/makecard/bwh0.png" v-else></image>
						</view>
						<view @click="switchQrcode" class="switch switch_bwh" v-if="!userInfo.sub_user_id">
							<image class="icon_check_qrcode" src="../../static/makecard/qrcode0.png"
								v-if="isMoveQrcode"></image>
							<image class="icon_check_qrcode" src="../../static/makecard/qrcode1.png" v-else></image>
						</view> -->
						<view @click="switchBg" class="switch switch_bg">
							<image class="icon_switchbg" src="../../static/makecard/switchbg.png"></image>
						</view>
						<view @click="make" class="make">制作</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<canvas canvasId="cutCanvas" :hidden="canvasHidden" :style="{width:cutCanvasWH + 'px', height: cutCanvasWH + 'px'}"></canvas>
		<canvas canvasId="firstCanvas" :hidden="canvasHidden" style="width: 200px; height: 200px;"></canvas>
	</view>

</template>

<script>
	/**
	 * @param {Object} a => this
	 * @param {Object} e => []
	 * @param {Object} o => 0
	 */
	function t(a, e, o) {
		var s = a.photos,
			i = a.card.layouts,
			l = s[o],
			r = i[o];
		uni.getImageInfo({
			src: l,
			success: function(i) {
				var l, n, d, h;
				i.width / i.height > r.height / r.width ? (n = r.width, l = i.width / i.height * n,
					d = !0, h = !1) : (l = r.height, n = i.height / i.width * l, d = !1, h = !0);
				var c = {
					width: i.width,
					height: i.height,
					rotateW: l,
					rotateH: n,
					scrollX: d,
					scrollY: h
				};
				e[o] = c, (o += 1) >= s.length ? (a.photos = s, a.photoInfos = e) : t(a, e, o);
			},
			fail: (errMsg) => {
				console.log(errMsg)
			}
		});
	}

	/**
	 * @param {Object} t=>this
	 * @param {Object} e=>[]
	 * @param {Object} o=>0
	 */
	function a(t, e, o) {
		var s, i, l = t.scrollInfo,
			r = t.photoInfos,
			n = t.photos,
			h = t.card.layouts,
			c = n[o],
			u = h[o],
			g = r[o],
			w = l[o],
			v = t.cutCanvasWH;
		g.width >= g.height ? i = (s = v) / g.width * g.height : s = (i = v) / g.height * g.width;
		var S = s / (g.rotateW * w.scale),
			p = u.height * S,
			y = u.width * S,
			I = uni.createCanvasContext("cutCanvas", t);
		I.clearRect(0, 0, s, i), I.drawImage(c, 0, 0, s, i), I.draw(!1, function(s) {
			uni.canvasToTempFilePath({
				x: w.x * S * f,
				y: w.y * S * f,
				width: p,
				height: y,
				destWidth: p * d,
				destHeight: y * d,
				canvasId: "cutCanvas",
				fileType: "png",
				quality: 1,
				success: function(s) {
					e[o] = s.tempFilePath, (o += 1) >= n.length ? (t.cutPhotos = e, t.drawMocard()) : a(t, e, o);
				}
			});
		});
	}

	function e() {
		return "android" == o().platform;
	}

	function o() {
		var t = uni.getSystemInfoSync();
		return t;
	}

	function s(t, a, e, o) {
		if (!a.isposting) {
			a.isposting = !0;
			var s = 1;
			a.isMoveQrcode && (s = 0);
			var i = {
				sub_user_id: a.userInfo.sub_user_id,
				has_qrcode: s,
				template_id: e,
				template_name: o
			};
			// r.request_post(a, "moka/apiSaveMokaRecord", i, function(e) {
			// 	"1" == e.status && (uni.setStorageSync("successImgSrc", t), a.showMaking = !1,
			// 		uni.navigateTo({
			// 			url: "../makesuccess/makesuccess?vertical=0&has_qrcode=" + s
			// 		}));
			// });
			a.showMaking = !1
			uni.setStorageSync("successImgSrc", t)
			uni.navigateTo({
				url: "/pages/moka/makeSuccess?vertical=0&has_qrcode=" + s
			});
		}
	}

	var i, l = require("../../config/07661147132B19AF610079408E24C660.js"),
		r = require("../../config/B4BCAC22132B19AFD2DAC42542F3C660.js"),
		n = getApp(),
		d = 2,
		h = o(),
		c = h.screenWidth,
		u = h.screenHeight,
		f = 750 / c,
		g = !1,
		w = !1,
		v = 0;


	export default {
		data() {
			return {
				showloadingmore: !1,
				pageloading: !0,
				loadingmore: !0,
				isloading: !1,
				isposting: !1,
				pageshow: "",
				screenW: c * f,
				screenH: (u - 44 - h.statusBarHeight) * f,
				showChangeButton: !1,
				changeIndex: -1,
				scrollTop: 0,
				allowScroll: !1,
				cutCanvasWH: 1800,
				photos: [],
				cutPhotos: [],
				photoInfos: [],
				scrollInfo: [],
				card: {},
				canvasHidden: !1,
				userInfo: {},
				isMoveQrcode: 1,
				isDark: !0,
				darkStyle: {
					bgColor: "black",
					pageBgColor: "#292b32",
					nameColor: "white",
					propertyColor: "#9B9B9B",
					valueColor: "#D5D5D5"
				},
				lightStyle: {
					bgColor: "white",
					pageBgColor: "#F4F6F7",
					nameColor: "#15161D",
					propertyColor: "#9B9B9B",
					valueColor: "#15161D"
				},
				avartar: "",
				logoAvartar: "",
				blackLogoAvartar: "",
				showMaking: !1,
				invite_count: 1,
				tipmoveqrcode_task1: !1,
				tipmoveqrcode_task2: !1,
				blackCode: "",
				whiteCode: "",
				uploadData: {}
			};
		},
		onLoad(option) {
			let cardid = uni.getStorageSync("cardid")
			this.photos = uni.getStorageSync("selectedPhotos")
			this.userInfo = uni.getStorageSync("carduserinfo")
			this.card = l.layouts[cardid];
			console.log(this.card)
			let r = []
			for (let n = 0; n < this.photos.length; n++) {
				let d = {
					x: 0,
					y: 0,
					scale: 1
				};
				r.push(d);
			}
			this.isMoveQrcode = 1
			this.scrollInfo = r
			this.getPhotoInfos();
			this.cutAvartar();
		},
		methods: {
			cutAvartar() {
				let t = this;
				uni.downloadFile({
					url: t.userInfo.avatar,
					success: function(a) {
						if (200 === a.statusCode) {
							var e = uni.createCanvasContext("firstCanvas", t);
							e.save()
							e.beginPath()
							e.arc(100, 100, 100, 0, 2 * Math.PI, !1)
							e.clip()
							e.drawImage(a.tempFilePath, 0, 0, 200, 200)
							e.restore()
							e.draw(false, function(a) {
									uni.canvasToTempFilePath({
										x: 0,
										y: 0,
										width: 200,
										height: 200,
										destWidth: 200,
										destHeight: 200,
										canvasId: "firstCanvas",
										fileType: "png",
										quality: 1,
										success: function(a) {
											t.avartar = a.tempFilePath;
											console.log(t.avartar)
											t.drawAvartar(!0);
											t.drawAvartar(!1);
										},
										fail: function(err) {
											console.log(err)
											uni.showModal({
												title: "头像裁剪失败",
												showCancel: !1
											});
										}
									});
								});
						}
					},
					fail:(Error) => {
						console.log(Error)
					}
				});
			},
			drawAvartar(t) {
				uni.downloadFile({
					url: this.userInfo.xcxcode.moka_code,
					success: (e) => {
						200 === e.statusCode && (t ? this.blackCode = e.tempFilePath : this.whiteCode = e.tempFilePath, this.drawCode(t));
					},
					fail:(err) => {
						console.log(err)
					}
				});
			},
			drawCode(t) {
				let _self = this
				let e = uni.createCanvasContext("firstCanvas", _self);
				e.setFillStyle("white")
				e.fillRect(0, 0, 200, 200)
				e.drawImage(t ? this.blackCode : this.whiteCode, 0, 0, 200, 200)
				e.drawImage(_self.avartar, 55, 55, 90, 90)
				e.draw(false, function(e) {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: 200,
						height: 200,
						destWidth: 200,
						destHeight: 200,
						canvasId: "firstCanvas",
						fileType: "png",
						quality: 1,
						success: function(e) {
							t ? _self.logoAvartar = e.tempFilePath : _self.blackLogoAvartar = e.tempFilePath, _self.canvasHidden = !0;
						},
						fail: function(t) {
							uni.showModal({
								title: "头像绘制失败",
								showCancel: !1
							});
						}
					});
				});
			},
			sliderChange(t) {
				this.allowScroll = !0
				var a = t.detail.y,
					e = 274 / f,
					o = (this.card.height - this.screenH + 40) / f * a / e;
				this.scrollTop = o
			},
			getPhotoInfos() {
				t(this, [], 0);
			},
			scroll(t) {
				this.scrollInfo[t.currentTarget.id].x = t.detail.scrollLeft;
				this.scrollInfo[t.currentTarget.id].y = t.detail.scrollTop;
			},
			touchStart(t) {
				this.allowScroll = !1
				var a = parseInt(t.currentTarget.id);
				if (i = a >= 0 && a < this.photos.length ? a : -1, g = !0, t.touches.length >= 2) {
					w = !0;
					var e = t.touches[1].pageX - t.touches[0].pageX,
						o = t.touches[1].pageY - t.touches[0].pageY;
					v = Math.sqrt(e * e + o * o);
				}
			},
			touchMove(t) {
				var a = this;
				if (!(i < 0 || i >= a.scrollInfo.length) && g && t.touches.length >= 2) {
					var e = t.touches[1].pageX - t.touches[0].pageX,
						o = t.touches[1].pageY - t.touches[0].pageY,
						s = Math.sqrt(e * e + o * o) - v;
					if (Math.abs(s) >= 0) {
						var l = a.scrollInfo[i].scale || 1;
						(l += 4e-4 * s) > 2 && (l = 2)
						l < 1 && (l = 1)
						a.scrollInfo[i].scale = l
					}
				}
			},
			touchEnd(t) {
				if (0 == t.touches.length) {
					if (g = !1, !w) {
						for (var a = t.changedTouches[0], e = -1, o = this.card.layouts, s = 0; s < o.length; s++) {
							var l = o[s];
							if (this.isTouchInLayout(a, l)) {
								e = l.id;
								break;
							}
						}
						var r = this.photos;
						if (-1 != i && -1 != e) {
							var n = r[i];
							r[i] = r[e], r[e] = n, this.photos = r, this.getPhotoInfos();
						}
					}
					w = !1;
				}
			},
			isTouchInLayout(t, a) {
				o();
				var e = this.scrollTop,
					s = f * t.pageX,
					i = f * (t.pageY + e);
				return s > a.x && s < a.x + a.width && i > a.y && i < a.y + a.height;
			},
			tapPhoto(t) {
				if (!g) {
					var a = parseInt(t.currentTarget.id);
					this.changeIndex = a
					this.showChangeButton = !this.showChangeButton
				}
			},
			changePhoto(t) {
				var a = parseInt(t.currentTarget.id),
					e = this;
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					sourceType: ["album"],
					success: function(t) {
						var o = t.tempFilePaths[0];
						e.photos[a] = o
						e.getPhotoInfos()
						e.changeIndex = -1
						e.showChangeButton = !1
					}
				});
			},
			make() {
				this.showMaking = !0
				a(this, [], 0);
			},
			drawMocard() {
				var t = this,
					a = t.card.height,
					o = t.card.width,
					i = uni.createCanvasContext("cutCanvas", t),
					l = {};
				l = t.isDark ? t.darkStyle : t.lightStyle, i.setFillStyle(l.bgColor),
					i.fillRect(0, 0, a, o), "cebian" == t.card.type || "charu" == t.card.type ? t.drawUserInfoWithCebian(t,
						i) : "dibu" == t.card.type && t.drawUserInfoWithDibu(t, i),
					t.drawPhotos(t, i);
				var r = e(),
					n = r ? 2 : 1.8;
				// 如遇工具生成失败，请在真机上调试
				i.draw(false, () => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: a,
							height: o,
							destWidth: a * n,
							destHeight: o * n,
							canvasId: "cutCanvas",
							fileType: "png",
							quality: 1,
							success: function(a) {
								var e = t.card.cardId,
									o = t.card.name;
								console.log(a.tempFilePath)
								s(a.tempFilePath, t, e, o);
							},
							fail: function(a) {
								uni.hideToast()
								t.showMaking = !1
								uni.showModal({
									title: "模卡保存失败",
									showCancel: !1
								});
							},
						}, t);
					}, 1000)
				})
			},
			/**
			 * 绘制图片
			 * @param {Object} t=>this
			 * @param {Object} a=>uni.createCanvasContext
			 */
			drawPhotos(t, a) {
				console.log(t.cutPhotos)
				for (var e = t.cutPhotos, o = t.card.layouts, s = t.card.width, i = 0; i < e.length; i++) {
					var l = e[i],
						r = o[i],
						n = r.y + 2,
						d = s - r.x - r.width + 2,
						h = r.height - 4,
						c = r.width - 4;
					console.log(l, n, d, h, c)
					a.drawImage(l, n, d, h, c);
				}
			},
			/**
			 * @param {Object} t => this
			 * @param {Object} a => uni.createCanvasContext
			 */
			drawUserInfoWithCebian(t, a) {
				var e = t.userInfo,
					o = (t.card.userInfo.x, t.card.userInfo.Y, t.card.userInfo.height, t.card.userInfo.width, 55);
				t.isMoveQrcode && (o += 65), e.is_bwh || (o += 80), e.is_birthday || (o += 25);
				var s = 40 + t.card.userInfo.y,
					i = o,
					l = {},
					r = (l = t.isDark ? t.darkStyle : t.lightStyle).propertyColor,
					n = l.valueColor;
				a.setFontSize(32), a.setFillStyle(n), a.fillText(e.nickname, s, i);
				var d = 8;
				if (t.isMoveQrcode && (d = 10), i += 40, a.setFontSize(18), a.setFillStyle(r),
					a.fillText("身高 HEIGHT", s, i), i += 25, a.setFontSize(18), a.setFillStyle(n), a.fillText(e.height +
						"cm", s, i),
					i += 22 + d, a.setFontSize(18), a.setFillStyle(r), a.fillText("体重 WEIGHT", s, i),
					i += 25, a.setFontSize(18), a.setFillStyle(n), a.fillText(e.weight + "kg", s, i),
					e.is_bwh && (i += 22 + d, a.setFontSize(18), a.setFillStyle(r), a.fillText("胸围 BUST", s, i),
						i += 25, a.setFontSize(18), a.setFillStyle(n), a.fillText(e.bwh_b, s, i), i += 22 + d,
						a.setFontSize(18), a.setFillStyle(r), a.fillText("腰围 WAIST", s, i), i += 25, a.setFontSize(18),
						a.setFillStyle(n), a.fillText(e.bwh_w, s, i), i += 22 + d, a.setFontSize(18), a.setFillStyle(r),
						a.fillText("臀围 HIPS", s, i), i += 25, a.setFontSize(18), a.setFillStyle(n), a.fillText(e.bwh_h, s,
							i)),
					i += 22 + d, a.setFontSize(18), a.setFillStyle(r), a.fillText("鞋码 SHOES", s, i),
					i += 25, a.setFontSize(18), a.setFillStyle(n), a.fillText(e.shoe, s, i), 
					i += 22 + d, a.setFontSize(18), a.setFillStyle(r), a.fillText("衣码 CLOTH", s, i),
					i += 25, a.setFontSize(18), a.setFillStyle(n), a.fillText(e.cloth, s, i),
					e.is_birthday && (i += 22 + d,
						a.setFontSize(18), a.setFillStyle(r), a.fillText("生日 BIRTH", s, i), i += 25, a.setFontSize(18),
						a.setFillStyle(n), a.fillText(e.birthday, s, i)), !t.isMoveQrcode) {
					i += 30;
					a.drawImage(t.isDark ? t.logoAvartar : t.blackLogoAvartar, s, i, 120, 120);
				}
			},
			drawUserInfoWithDibu(t, a) {
				var e = t.userInfo,
					o = (t.card.userInfo.x, t.card.userInfo.Y, t.card.userInfo.height,
						t.card.userInfo.width, 67),
					s = 580,
					i = {},
					l = (i = t.isDark ? t.darkStyle : t.lightStyle).propertyColor,
					r = i.valueColor;
				a.setFontSize(32), a.setFillStyle(r), a.fillText(e.nickname, o, s);
				s = 560, o += 160, a.setFontSize(18), a.setFillStyle(l), a.fillText("身高HEIGHT", o, s),
					s += 31, a.setFontSize(18), a.setFillStyle(r), a.fillText(e.height + "cm", o, s),
					s = 560, o += 140, a.setFontSize(18), a.setFillStyle(l), a.fillText("体重WEIGHT", o, s),
					s += 31, a.setFontSize(18), a.setFillStyle(r), a.fillText(e.weight + "kg", o, s),
					e.is_bwh && (s = 560, o += 140, a.setFontSize(18), a.setFillStyle(l), a.fillText("胸围BUST", o, s),
						s += 31, a.setFontSize(18), a.setFillStyle(r), a.fillText(e.bwh_b, o, s), s = 560,
						o += 140, a.setFontSize(18), a.setFillStyle(l), a.fillText("腰围WAIST", o, s), s += 31,
						a.setFontSize(18), a.setFillStyle(r), a.fillText(e.bwh_w, o, s), s = 560, o += 140,
						a.setFontSize(18), a.setFillStyle(l), a.fillText("臀围HIPS", o, s), s += 31, a.setFontSize(18),
						a.setFillStyle(r), a.fillText(e.bwh_h, o, s)), 
						s = 560, o += 140, a.setFontSize(18),a.setFillStyle(l), a.fillText("鞋码SHOES", o, s), 
						s += 31, a.setFontSize(18), a.setFillStyle(r),a.fillText(e.shoe, o, s), 
						s = 560, o += 140, a.setFontSize(18),a.setFillStyle(l), a.fillText("衣码CLOTH", o, s),
						s += 31, a.setFontSize(18), a.setFillStyle(r),a.fillText(e.cloth, o, s), 
						e.is_birthday && (s = 560, o += 140, a.setFontSize(18),
						a.setFillStyle(l), a.fillText("生日BIRTH", o, s), s += 31, a.setFontSize(18), a.setFillStyle(r),
						a.fillText(e.birthday, o, s));
				o = t.card.userInfo.height - 80 - 30, s = 530;
				t.isMoveQrcode || a.drawImage(t.isDark ? t.logoAvartar : t.blackLogoAvartar, o, s, 80, 80);
			},
			switchBg() {
				this.isDark = !this.isDark
			},
			switchBirthday() {
				this.userInfo.is_birthday = !this.userInfo.is_birthday
			},
			switchBWH() {
				this.userInfo.is_bwh = !this.userInfo.is_bwh
			},
			switchQrcode() {
				this.isMoveQrcode ? this.isMoveQrcode = 0 : this.isMoveQrcode = 1
			},
			closeTipMoveQrcode() {
				this.tipmoveqrcode_task1 = !1
				this.tipmoveqrcode_task2 = !1
			},
			goInvite() {
				this.closeTipMoveQrcode(), uni.navigateTo({
					url: "../../user/invite/invite"
				});
			},
			goAddwx() {
				this.closeTipMoveQrcode(), uni.navigateTo({
					url: "../../index/addwx/addwx"
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		position: relative;
	}

	.container {
		padding: 0;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: row;
		width: 100%;
		height: 100%;
	}

	.moka-container {
		padding: 10rpx 0;
		box-sizing: border-box;
		background: #292b32;
		margin-left: 2rpx;
	}

	.main-scrollview-black {
		box-sizing: border-box;
		border: 6rpx solid #000;
		border-left-width: 3rpx;
	}

	.main-scrollview-white {
		box-sizing: border-box;
		border: 6rpx solid #fff;
		border-left-width: 3rpx;
	}

	.slider {
		width: 80rpx;
		height: 458rpx;
		background-size: 100% 100%;
		z-index: 9999999;
	}

	.making,
	.slider {
		position: absolute;
	}

	.making {
		left: 275rpx;
		width: 200rpx;
		height: 200rpx;
		line-height: 200rpx;
		z-index: 99;
		color: #fff;
		text-align: center;
		background-color: rgba(0, 0, 0, .7);
		transform: rotate(90deg);
		border-radius: 10rpx;
		font-size: 22rpx;
	}

	.making-icon {
		height: 60rpx;
	}

	.making-icon image {
		width: 60rpx;
		height: 60rpx;
	}

	.tipmoveqrcode {
		left: 100rpx;
		width: 520rpx;
		height: 480rpx;
		position: absolute;
		z-index: 99999;
		transform: rotate(90deg);
		border-radius: 10rpx;
		font-size: 24rpx;
		background-color: #fff;
		text-align: center;
	}

	.tipmove_close {
		height: 46rpx;
		text-align: right;
	}

	.tipmove_close image {
		width: 36rpx;
		height: 36rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
	}

	.tipmove_fail {
		width: 180rpx;
		height: 132rpx;
		margin: 0 0 30rpx;
	}

	.tipmove_text {
		font-size: 30rpx;
		font-weight: 400;
		color: #000;
		line-height: 42rpx;
	}

	.tipmove_text2 {
		margin-top: 3rpx;
	}

	.tipmove_btn {
		width: 250rpx;
		height: 70rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #000;
		line-height: 70rpx;
		text-align: center;
		background: #ffdb00;
		border-radius: 35rpx;
		margin: 60rpx 135rpx 0;
	}

	.change {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fae60f;
		border-radius: 1000rpx;
		transform: rotate(90deg);
		color: #15161d;
		text-align: center;
		font-size: 26rpx;
	}

	.slider-bg {
		width: 52rpx;
		height: 100%;
		margin-left: 14rpx;
		background: rgba(43, 44, 51, .5);
		text-align: center;
		border-radius: 26rpx;
	}

	.slider-btn,
	.slider-btn image {
		width: 52rpx;
		height: 146rpx;
	}

	.header {
		justify-content: space-between;
		align-items: center;
	}

	.header,
	.title {
		display: flex;
	}

	.title {
		flex-direction: row;
	}

	.title .edit {
		margin-left: 20rpx;
		margin-right: 22rpx;
		color: #9b9b9b;
		font-size: 36rpx;
	}

	.title .move {
		margin-top: 12rpx;
		color: #9b9b9b;
		font-size: 28rpx;
		padding-left: 20rpx;
	}

	.operation,
	.switch {
		display: flex;
	}

	.switch {
		align-items: center;
	}

	.switch_bg,
	.switch_birth,
	.switch_bwh {
		margin-right: 50rpx;
	}

	.icon_check {
		width: 118rpx;
	}

	.icon_check,
	.icon_check_qrcode {
		height: 54rpx;
		border-radius: 8rpx;
	}

	.icon_check_qrcode {
		width: 144rpx;
	}

	.icon_switchbg {
		width: 164rpx;
		height: 54rpx;
		border-radius: 8rpx;
	}

	.make {
		color: #2a1500;
		background-color: #fae60f;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(255, 219, 0, .74);
		width: 160rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 8rpx;
		text-align: center;
		margin-right: 30rpx;
	}

	.cutphoto {
		width: 300rpx;
		height: 300rpx;
	}

	.photo-container {
		box-sizing: border-box;
		border: 1rpx solid red;
	}

	.photo-container,
	.userinfo-container {
		position: relative;
	}

	.userinfo-container image,
	.userinfo-info {
		width: 100%;
		height: 100%;
	}

	.userinfo-info {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		padding-left: 40rpx;
		color: #fff;
	}

	.name {
		font-weight: 700;
		font-size: 32rpx;
		margin-top: 18rpx;
	}

	.name_moveqr {
		margin-top: 75rpx;
	}

	.cebian_move_qrcode {
		height: 57rpx;
	}

	.cebian_move_bwh {
		height: 85rpx;
	}

	.cebian_move_birthday {
		height: 28rpx;
	}

	.dibu_move_qrcode {
		width: 57rpx;
	}

	.dibu_move_bwh {
		width: 85rpx;
	}

	.dibu_move_birthday {
		width: 28rpx;
	}

	.item-cebian {
		margin-top: 7rpx;
		display: flex;
		flex-direction: column;
	}

	.property {
		color: #9b9b9b;
	}

	.property,
	.value {
		font-size: 18rpx;
	}

	.userinfo-info image {
		margin-top: 15rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.userinfo-info-dibu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		justify-content: space-between;
		align-items: center;
		color: #fff;
	}

	.userinfo-info-dibu,
	.userinfo-info-dibu-left {
		display: flex;
		flex-direction: row;
	}

	.name-dibu {
		font-weight: 700;
		font-size: 32rpx;
		margin-left: 67rpx;
		margin-right: 10rpx;
	}

	.item-dibu {
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.property-dibu {
		color: #9b9b9b;
	}

	.property-dibu,
	.value-dibu {
		font-size: 18rpx;
	}

	.userinfo-info-dibu image {
		margin-right: 60rpx;
		width: 65rpx;
		height: 65rpx;
	}
</style>
